<template>
    <div class="">
        <div>
            <left_statusVue_management></left_statusVue_management>
            <div class="right-box">
                <Top_status></Top_status>
                <div class="search_bar">
                    <div class="search_box">
                        <p class="search_bar_Tag">活动搜索</p>
                        <input type="text" class="search_input" placeholder="请输入">
                    </div>
                    <div class="search_box">
                        <p class="search_bar_Tag">创建人</p>
                        <input type="text" class="search_input" placeholder="请输入">
                    </div>
                    <div class="search_box">
                        <p class="search_bar_Tag">日期</p>
                        <input type="text" class="search_input" placeholder="请输入">
                    </div>
                    <div class="search_box">
                        <p class="search_bar_Tag">活动状态</p>
                        <!-- <input type="text" class="search_input" placeholder="请输入"> -->
                        <select name="person_status" id="person_status" class="person_option">
                            <option :value="item" v-for="item in person_status" :key="item">{{ item }}</option>
                        </select>
                    </div>
                    <div class="search_box">
                        <button class="search_button">搜索</button>
                        <button class="search_button">新建活动</button>
                    </div>
                </div>
                <ul class="center" id="center">
                    <div class="person_manage_center_top">
                        <p class="person_manage_center_top_font" style="width: 500px;">活动名称</p>
                        <p class="person_manage_center_top_font"  style="width: 160px;">创建人</p>
                        <p class="person_manage_center_top_font" style="width: 300px;">活动日期</p>
                        <p class="person_manage_center_top_font" style="width: 160px;">活动状态</p>
                        <p class="person_manage_center_top_font" style="width: 160px;">投票进度</p>
                        <p class="person_manage_center_top_font" style="width: 160px;">最多投票</p>
                        <p class="person_manage_center_top_font" style="width: 400px;">操作</p>
                    </div>
                    <div class="person_manage_center_top hover_show" v-for="index in displayactive" :key="index"
                        :value="index" :style="choose_status == 0 ? '' : 'display:none;'">
                        <div class="person_manage_center_top_font " style="width: 500px;">{{ index.activity_name }}</div>
                        <div class="person_manage_center_top_font " style="width: 160px;">{{ index.creater }}</div>
                        <div class="person_manage_center_top_font " style="width: 300px; font-size: 15px;">{{
                            index.activity_date }}
                        </div>
                        <div class="person_manage_center_top_font" v-if="index.active_state == '进行中'"
                            :style="index.active_state == '进行中' ? 'color:#e81212' : ''"
                            :id="'maychange_color_' + index.id" style="width: 160px;">{{
                                index.active_state }}</div>
                        <div class="person_manage_center_top_font" v-if="index.active_state == '未开始'"
                            :style="index.active_state == '未开始' ? 'color:rgb(13 160 227)' : ''"
                            :id="'maychange_color_' + index.id" style="width: 160px;">{{
                                index.active_state }}</div>
                        <div class="person_manage_center_top_font" v-if="index.active_state == '已结束'"
                            :id="'maychange_color_' + index.id" style="width: 160px;">{{
                                index.active_state }}</div>
                        <div class="person_manage_center_top_font " style="width: 160px;">{{ index.voting_progress }}</div>
                        <div class="person_manage_center_top_font " style="width: 160px;">
                            <p v-for="item in index.max_voting" :key="item" style="display: contents; color:#00c100">{{
                                item }}</p>
                        </div> 
                        <div class="person_manage_center_top_font " style="width: 400px;">
                            <!-- <button class="person_button" 
                                :id="'details_id_' + index.id">
                                <Popup_details_message @click="send_popup_person_messageVue($event)" :details_choose="tableData[this.details_choose_id]"></Popup_details_message>
                            </button> -->
                            <button class="person_button" 
                                :id="'details_id_' + index.id">
                                <Popup_details_message :details_choose="tableData"></Popup_details_message>
                            </button>
                            <button class="person_button">信息修改</button>
                            <button class="person_button opteion_choose">活动结束</button>
                            <button class="person_button">删除</button>
                        </div>


                        <!-- 清除浮动效果的高度塌陷 -->
                        <div style="clear: both"></div>
                    </div>

                    <!-- <button @click="mytry($event)">尝试</button> -->

                    <!-- pager-count 能够显示的最多页码 -->
                    <el-pagination :page-size="1" :pager-count="5" layout="prev, pager, next" :total="total"
                        @current-change="pagechange" :style="choose_status == 0 ? '' : 'display:none;'" />
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import left_statusVue_management from '@/components/left_status/left_status_management.vue';
import Top_status from '@/components/top_status/top_status.vue';
import Popup_details_message from '@/components/admin/popup/popup_details_message.vue';
import { event } from 'jquery';


export default {
    data() {
        return {
            person_status: ['在职', '离职', '退休', '外出'],
            myoption_id: 0, //我的选择 选项的id
            total: 1, //默认总页数
            page: 1, //默认页数
            M: 0, //当前显示条例的开头
            N: 9, // 你想显示数量的结尾  显示数量=尾-头
            newM: 0, //临时存储M
            newtotal: 0, //临时存储total
            choose_status: 0, //判断当前是否已选中 0为未选中 1为选中状态
            // 选中的id
            choose_id: 1, //选中当前的投票活动
            choose_option_count: 0, //选中当前的选项个数
            choose_option: [], //选中对象数组

            details_choose_id:1, //选中的详细信息数
            tableData: [
                {
                    id: 1,
                    activity_name: '春游计划投票1',
                    creater: 'Tom',
                    activity_date: '2024.11.17-2024.12.17.',
                    active_state: '进行中',
                    voting_progress: '9/21',
                    max_voting: ['A'],
                }, {
                    id: 2,
                    activity_name: '春游计划投票2',
                    creater: 'Tom',
                    activity_date: '2024.11.17-2024.12.17.',
                    active_state: '未开始',
                    voting_progress: '9/21',
                    max_voting: ['A', 'B'],
                }, {
                    id: 3,
                    activity_name: '春游计划投票3',
                    creater: 'Tom',
                    activity_date: '2024.11.17-2024.12.17.',
                    active_state: '已结束',
                    voting_progress: '9/21',
                    max_voting: ['A'],
                }, {
                    id: 4,
                    activity_name: '春游计划投票',
                    creater: 'Tom',
                    activity_date: '2024.11.17-2024.12.17.',
                    active_state: '进行中',
                    voting_progress: '9/21',
                    max_voting: ['A'],
                }, {
                    id: 5,
                    activity_name: '春游计划投票',
                    creater: 'Tom',
                    activity_date: '2024.11.17-2024.12.17.',
                    active_state: '进行中',
                    voting_progress: '9/21',
                    max_voting: ['A'],
                }, {
                    id: 6,
                    activity_name: '春游计划投票',
                    creater: 'Tom',
                    activity_date: '2024.11.17-2024.12.17.',
                    active_state: '未开始',
                    voting_progress: '9/21',
                    max_voting: ['A', 'B'],
                }, {
                    id: 7,
                    activity_name: '春游计划投票',
                    creater: 'Tom',
                    activity_date: '2024.11.17-2024.12.17.',
                    active_state: '已结束',
                    voting_progress: '9/21',
                    max_voting: ['A'],
                }, {
                    id: 8,
                    activity_name: '春游计划投票',
                    creater: 'Tom',
                    activity_date: '2024.11.17-2024.12.17.',
                    active_state: '进行中',
                    voting_progress: '9/21',
                    max_voting: ['A'],
                }, {
                    id: 9,
                    activity_name: '春游计划投票',
                    creater: 'Tom',
                    activity_date: '2024.11.17-2024.12.17.',
                    active_state: '进行中',
                    voting_progress: '9/21',
                    max_voting: ['A'],
                }, {
                    id: 10,
                    activity_name: '春游计划投票',
                    creater: 'Tom',
                    activity_date: '2024.11.17-2024.12.17.',
                    active_state: '未开始',
                    voting_progress: '9/21',
                    max_voting: ['A', 'B'],
                }, {
                    id: 11,
                    activity_name: '春游计划投票',
                    creater: 'Tom',
                    activity_date: '2024.11.17-2024.12.17.',
                    active_state: '已结束',
                    voting_progress: '9/21',
                    max_voting: ['A'],
                }, {
                    id: 12,
                    activity_name: '春游计划投票',
                    creater: 'Tom',
                    activity_date: '2024.11.17-2024.12.17.',
                    active_state: '进行中',
                    voting_progress: '9/21',
                    max_voting: ['A'],
                }, {
                    id: 13,
                    activity_name: '春游计划投票',
                    creater: 'Tom',
                    activity_date: '2024.11.17-2024.12.17.',
                    active_state: '进行中',
                    voting_progress: '9/21',
                    max_voting: ['A'],
                }
            ]
        };
    },
    components: {
        left_statusVue_management,
        Top_status,
        Popup_details_message
    },
    created() {
        let newtotal = this.tableData.length / (this.N - this.M);
        this.total = newtotal; //更新总页数

    },
    beforeUpdate() {
    },
    computed: {
        displayactive() {
            // 通过计算属性控制 显示条例个数
            return this.tableData.slice(this.M, this.N);
        },

    },
    methods: {
        //获取当前点击的组件 选中某个详细信息
        send_popup_person_messageVue(data) {
            // console.log(data.target);
            let details_button = data.target.parentElement.parentElement
            let details_button_id = details_button.id.substring(11) //获取当前id数
            console.log(details_button_id);
            this.details_choose_id = details_button_id
            
            console.log(details_button);
            
            
        },

        // 在活动中 选中某个将投票选项
        option_choose(data) {
            function hasClass(element, className) {
                // 定义判断是否具备一个样式的方法
                const replacedName = element.className.replace(/\t*\s+/g, " "); //避免空格 tab等特殊占位的非样式影响
                return (" " + replacedName + " ").indexOf(" " + className + " ") > -1;
            }
            let choose_p = data.previousElementSibling.previousElementSibling; //文字

            // console.log(hasClass(data,'opteion_choose'));
            if (hasClass(data, "opteion_choose")) {
                //删除红色选中样式
                console.log("dsfa");
                data.classList.remove("opteion_choose");
                choose_p.classList.remove("opteion_choose");
                this.choose_option_count--;
            } else {
                // 没有样式时添加

                if (
                    this.choose_option_count <=
                    this.active[this.choose_id - 1].maxchoose - 1
                ) {
                    //当他小于当前选中的最大选中数时
                    this.choose_option_count++;
                    data.classList.add("opteion_choose");
                    choose_p.classList.add("opteion_choose");
                    // console.log(this.active[this.choose_id].maxchoose-1);
                } else {
                    alert("大于当前最大选中数！");
                }
            }

            // console.log(hasClass(data,'opteion_choose'));
        },
        // // 选中活动
        // choose(data) {
        //     // console.log(data);
        //     console.log(data.parentNode.parentNode.parentNode);
        //     // this.newM=this.M
        //     // this.M=this.N+1 //将起始位置置于后端
        //     this.newtotal = this.total; //存储页数
        //     this.total = 0; //将页数置零
        //     this.choose_status = 1; //已选中
        //     this.choose_id = data.id;
        //     console.log(data.id);
        //     document.getElementById("choose_center_text").innerHTML =
        //         this.active[this.choose_id - 1].name; //获取并将标题内容赋值
        // },
        // 返回按钮
        back() {
            this.choose_status = 0; //将显示状态 改为未选中
            this.total = this.newtotal; //将页数置零
            this.newtotal = 0; //将默认值重置
            let a = document.getElementsByClassName("opteion_choose"); //样式重置
            let i = 0;
            while (i < a.length) {
                console.log("hello");
                a[i].classList.remove("opteion_choose"); //将颜色全部移除
            }

            this.choose_option_count = 0; // 重置选中数
        },
        // mytry() {
        //     console.log(document.getElementsByClassName("opteion_choose"));
        //     console.log(document.getElementsByClassName("opteion_choose").length);
        // },

        // 下方跳转页面
        pagechange(data) {
            // console.log('hello',data);
            // console.log(this.M,this.N);
            // data为点击转跳的页码
            if (data > this.page) {
                //如果转跳页面大于当前页数
                // console.log("往后");
                let a = this.M;
                let shownum = this.N - a; //一页展示的个数
                // console.log(shownum);

                this.M += (data - this.page) * shownum; //将当前的页面转为转跳的位置
                this.N += (data - this.page) * shownum;
                // console.log(this.M,this.N);
                this.page = data;
                // console.log('当前页'+this.page);
            } else {
                // console.log('往前');
                let a = this.M;
                let shownum = this.N - a; //一页展示的个数
                // console.log(shownum);

                this.M -= (this.page - data) * shownum; //将当前的页面转为转跳的位置
                this.N -= (this.page - data) * shownum;
                // console.log(this.M,this.N);
                this.page = data;
                // console.log('当前页'+this.page);
            }
        },
        mytry(data) {
            let i = document.getElementById('maychange_color_1')
            console.log(i.innerHTML);

        }

    },
};
</script>

<style scoped>
.center {
    width: 75vw;
    height: 80vh;
    border: solid 1px #7c7c7c;
    margin-top: 20px;
    margin-right: 70px;

    /* padding-top: 25px; */
    float: right;
    padding: 20px 40px 0px 40px;
    
    /* 超出部分出现滚轮 */
    overflow: auto; 
}

.center li .maintext_box {
    display: flex;
    /* margin-top: 0px;
    margin-left: 5%; */

    font-size: 24px;
    color: #000000;
    /* width: 68vw; */
    height: 5vh;
    font-size: 20px;
    justify-content: space-between;
}

.center li div .maintext {
    display: flex;
    /* width: 100%; */
    height: 5vh;
    /* border: solid 1px #7c7c7c; */
    align-items: center;
    /* padding: 0px 0px 0 6px; */

}

.maintext-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: 10px;
    width: 115px;
}

.tip {
    margin: 0px;
    /* display: flex;
    justify-content: space-between; */
    /* padding: 3px 5vw 0 5%; */
}

.tip p {
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #737373;
    float: left;
    margin-top: 10px;

    line-height: 25px;
}

.tip div {
    float: right;
}

.btn-success {
    margin-left: 15px;
    padding: 4px 10px;
    margin-top: 4px;
}

.choose_main_box {
    height: 95%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.choose_top {
    display: flex;
    justify-content: flex-end;
}

.theme {
    font-size: large;
    margin: 0%;
}

.choose_main {
    font-size: 20px;
}

.choose_main_text {
    border: solid 1px #7c7c7c;

    height: 15vh;
    display: flex;
    padding: 5px;
    text-align: left;
}

.choose_main_text p {
    width: 100%;
    word-wrap: break-word;
    /* 旧版浏览器支持 */
    overflow-wrap: break-word;
    /* 标准属性 */
}

.option_box {
    /* height: 60%; */
    /* display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      align-content: space-between; */
    margin-bottom: 10px;
}

.option_list {
    width: 30%;
    display: inline-flex;
    min-width: 50%;
    min-height: 70px;
    font-size: 20px;
}

.option_top {
    /* float: left; */
    width: 65px;
}

.option_center {
    /* float: left; */
    width: -webkit-fill-available;
    border: 1px solid rgb(124, 124, 124);
    /* 每增加一个元素高度减少10px */
    height: calc(10px * var(--count) + 80px);
    text-align: center;
    display: flex;
    justify-content: center;
    list-style-type: none;
    margin-bottom: 5px;

    display: flex;
    align-items: center;
    background-color: transparent;
}

.Con_vote {
    width: 100px;
}

:root {
    --count: 1;
}

.opteion_choose {
    color: red;
    border-color: red;
}

.option_no_choose {
    color: black;
    border-color: rgb(124, 124, 124);
}

.search_bar {
    float: right;
    width: 75vw;
    display: flex;
    margin-right: 70px;
    margin-top: 20px;
    justify-content: space-around;
}

.search_bar_Tag {
    display: inline;
    font-size: 16px;
    margin-right: 5px;
}

.search_input {
    width: 160px;
}

.search_box:not(:first-child) {
    /* 伪类选中除了第一个以外 */
    margin-left: 10px;
}

.search_button {
    width: 75px;
    background-color: transparent;
    border: 1px solid #767676;
    height: 25px;
}

.search_button:not(:last-child) {
    margin-right: 10px;
}

.person_option {
    width: 70px;
}

.person_manage_center_top {
    display: flex;
    justify-content: space-evenly;
}

.person_manage_center_top_font {
    width: 20%;
    ;
    font-size: 20px;
}

.person_button {
    background-color: transparent;
    border: none;
    font-size: 15px;
}

.person_button:not(:last-child) {
    margin-right: 10px;
}

.hover_show {
    transition: background-color 0.3s;
    /* 平滑背景颜色过渡 */

    line-height: 50px;
    color: #333;

}

.hover_show:hover {
    background-color: #d3d3d3;
    /* 鼠标悬停时的背景颜色 */
}
</style>